<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>东单办公系统-部门列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="media/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="media/js/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div class="layui-container">
    <div>
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" onclick="studentAndGrade()">
            查看班级学生图表
        </button>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel1">
                            各班级人数
                        </h4>
                    </div>
                    <div class="modal-body">

                        <div id="dvtbusers" style="width: 600px;height:400px;"></div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->

        </div>
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit" data-toggle="modal" data-target="#myModal">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            修改班级信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" id="form1">
                            <div class="form-group">
                                <label for="id" class="col-sm-2 control-label">序号:</label>
                                <div class="col-sm-10">
                                    <input class="form-control" name="id" id="id" type="text" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label">班级名称:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入班级名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="createtime" class="col-sm-2 control-label">开班日期:</label>
                                <div class="col-sm-10">
                                    <input type="date" class="form-control" id="createtime" name="createtime"
                                           placeholder="请输入开班日期">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="week" class="col-sm-2 control-label">周期:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="week" name="week" placeholder="请输入周期">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="location" class="col-sm-2 control-label">开班地址:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="location" name="location"
                                           placeholder="请输入开班地址">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="button" class="btn btn-primary" id="but">
                                    提交更改
                                </button>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
    <script src="media/layui/layui.js"></script>
    <script>
        var echarts = echarts.init(document.getElementById("dvtbusers"));
        var option = {
            title: {
                text: "各班级人数",
                link: "http://www.baidu.com"
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['班级人数']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [
                {
                    name: '部门人数',
                    type: 'line',
                    data: [11, 11, 15, 13, 12, 13, 10],
                }
            ]
        }
        echarts.setOption(option);


        function studentAndGrade() {
            $.ajax({
                url: 'student/selectStuGrade.do',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    console.log("后端的数据++" + data)
                    console.log("后端的数据++" + data.grades)
                    console.log("后端的数据++" + data.counts)

                    console.log("前端的++option.xAxis.data" + option.xAxis.data)
                    console.log("前端的++option.series[0].data" + option.series[0].data)

                    option.xAxis.data = data.data.grades;
                    option.series[0].data = data.data.counts;
                    echarts.setOption(option);
                }
            })
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script>
        layui.use(['table', 'laydate', "laypage", "layer", 'carousel', 'upload', 'element'], function () {
            //初始化table组件对象
            var table = layui.table
                , laypage = layui.laypage//分页的组件
                , layer = layui.layer//弹框
                , laydate = layui.laydate//日期组件
                , element = layui.element;//元素的操作

            console.log("12313")
            //渲染table
            table.render({
                //z找到table  id叫test的组件
                elem: '#test'
                , id: "transferTable"
                , url: 'grade/selectGradeAll.do'
                , totalRow: true
                //这个很关键，就是解析 json数据库中数据的 一定要注意键值
                , cols: [[
                    {field: 'id', title: '序号', width: 100, unresize: true, sort: true, fixed: "left"}
                    , {field: 'name', title: '班级名称', width: 200}
                    , {field: 'createtime', title: '开班日期', width: 200}
                    , {field: 'week', title: '周期', width: 150}
                    , {field: 'location', title: '开班地址', width: 230}
                    , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barDemo'}
                ]]
                , page: true //分页开启
            });
            //搜索框有效果的情况
            var active = {
                reload: function () {
                    //执行重载
                    table.reload('transferTable', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            };

            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.alert('序号 :      ' + data.id + '<br> 班级名称: ' + data.name + '<br> 开班日期: ' +
                        data.createtime + '<br> 周期:      ' + data.week + '<br> 开班地址: ' + data.location);
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么' + data.id, function (index) {
                        layui.$.ajax({
                            type: 'get',
                            url: 'grade/deleteGradeById.do?id=' + data.id,
                            dataType: 'json',
                            success: function (data) {
                                if (data.code == 0) {
                                    alert("删除成功")
                                } else {
                                    alert("删除失败!")
                                }
                            }
                        })
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
					location.href="gradeupdate.html?d="+ encodeURI(JSON.stringify(data));
                }
            });

            $('.serchDiv .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

        /*$("#but").click(function () {
            var id = $("#id").val()
            $.ajax({
                type: 'post',
                url: 'grade/updateGrade.do?id=' + id,
                data: $("#form1").serialize(),
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {
                        alert(data.info);
                        window.location.href = "gradelist.html"
                        /!*window.parent.location.reload();*!/
                    } else {
                        alert("修改失败！")
                    }
                }
            })
        })*/
    </script>
</div>
</body>
</html>